<template>
	<view>
		<view class="mb-2-2">
			<c-img :src="data.couponsUrl" :width="750" mode="widthFix" />
		</view>
		<view class="text-center">
			<c-img :src="data.couponsLogo" :width="200" :height="200" />
		</view>
		<view class="row-center content-center" style="margin: 24rpx 0">
			<view class="h-min bg-active" style="width: 180rpx"></view>
			<text class="text-l color-main block mx-1-3">核券详情</text>
			<view class="h-min bg-active" style="width: 180rpx"></view>
		</view>
		<!-- <view class="row-center mx-2 border-b pb-2-2" style="borer-color: #373737; border-bottom-style: dashed">
			<view class="flex-1">
				<text class="block mb-2-2 text-l" style="color: #797979">核券主体：</text>
				<text class="block color-main text-l">雅诗曼美容店</text>
			</view>
			<view class="flex-1">
				<text class="block mb-2-2 text-l" style="color: #797979">核券时间：</text>
				<text class="block mb-2-2 color-main text-l">2024-08-31 15:38:27</text>
			</view>
		</view> -->
		<view class="mx-2 border-b py-2-2" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="block mb-2-2 text-l" style="color: #797979">有效期：</text>
			<text class="block color-main text-l">{{ dateText }}</text>
		</view>
		<view class="mx-2 border-b py-2-2" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="block mb-2-2 text-l" style="color: #797979">使用时段：</text>
			<text class="block color-main text-l">{{ timeText }}</text>
		</view>
		<view class="mx-2 border-b py-2-2" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="block mb-2-2 text-l" style="color: #797979">用券范围：</text>
			<view v-if="data.couponsScope === CouponsScope.self">
				<c-empty v-if="!data.productCategoryNameList || data.productCategoryNameList.length === 0"></c-empty>
				<template v-else>
					<view
						v-for="(el, i) in data.productCategoryNameList"
						:key="i"
						class="rounded-xxl px-1-3 py-1 inline-block mr-1 mb-1"
						style="background-color: #d3d3d3"
					>
						<text class="text-m" style="color: #d7236d">{{ el }}</text>
					</view>
				</template>
			</view>
			<view v-else>
				<c-empty v-if="!data.unionNameList || data.unionNameList.length === 0"></c-empty>
				<template v-else>
					<view
						v-for="(el, i) in data.unionNameList"
						:key="i"
						class="rounded-xxl px-1-3 py-1 inline-block mr-1 mb-1"
						style="background-color: #d3d3d3"
					>
						<text class="text-m" style="color: #d7236d">{{ el }}</text>
					</view>
				</template>
			</view>
		</view>
		<view class="mx-2 border-b py-2-2" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="block mb-2-2 text-l" style="color: #797979">描述说明：</text>
			<rich-text v-if="data.description" class="csc-rich-text" :nodes="handleImgRichText(data.description)"></rich-text>
			<c-empty v-else></c-empty>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { CouponsScope } from '@/base/common-data.js';
import { handleImgRichText } from '@/base/common-business.js';
import dateUtil from '@/uni-sdk/utils/date.js';

const props = defineProps({
	data: Object,
});

const dateText = computed(() => {
	if (props.data.isPermanently) return '长期';
	const startPeriod = props.data.startPeriod;
	const endPeriod = props.data.endPeriod;
	if (!startPeriod || !endPeriod) {
		return '--';
	}
	return `${dateUtil.format(startPeriod, 'yyyy-MM-dd')} ~ ${dateUtil.format(endPeriod, 'yyyy-MM-dd')}`;
});

const timeText = computed(() => {
	if (props.data.isAllDay) return '全天';
	if (!props.data.startTime) return '--';
	return `${props.data.startTime} ~ ${props.data.endTime}`;
});
</script>

<style></style>
